<template>
    <view>
        <signature :showCanvas="showCanvas" @finish="finish"></signature> <u-button @click="imgView()"></u-button>
        <view v-show="avatar" class="SignatureImg"><u-image :src="avatar" mode=""></u-image></view>
    </view>
</template>

<script>
    import signature from "@/components/signature.vue";
    import axios from "axios";
    import * as consts from "@/utils/constant.js";

    export default {
        data() {
            return {
                //打开canvas绘制签名
                showCanvas: true,
                avatar: null,
            };
        },
        components: {
            signature,
        },
        mounted() {
        },
        methods: {
            imgView() {
                showCanvas=false;
                uni.previewImage({
                    indicator: "number",
                    loop: true,
                    url: this.avatar
                })
            },
            async finish(base64String) {
                const service = axios.create({
                    baseURL: consts.API_BASE_URL,
                    timeout: 1000 * 60 * 3,
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                });
                service.interceptors.request.use(
                        (config) => {
                            if (
                                    config.url.indexOf("withoutLogin") == -1 ||
                                    config.url.indexOf("bindAndLogin") == -1 ||
                                    config.url.indexOf("listDept") == -1
                            ) {
                                let token = uni.getStorageSync("token");
                                token && token !== "" && (config.headers.Authorization = "Bearer " + token);
                            }
                            return config;
                        },
                        (error) => {
                            return Promise.reject(error);
                        }
                );

                //这里对base64串进行操作，去掉url头，并转换为byte
                let bytes = window.atob(base64String.split(",")[1]);
                let array = [];
                for (let i = 0; i < bytes.length; i++) {
                    array.push(bytes.charCodeAt(i));
                }
                let blob = new Blob([new Uint8Array(array)], {type: "image/png"});
                let formData = new FormData();
                formData.append("file", blob, Date.now() + ".png");

                service({
                    url: "/xsdcrm-wechat-api/common/upload",
                    method: "POST",
                    data: formData,
                }).then(async (respon) => {
                    let res = respon.data;
                    if (res.code != 200) {
                        uni.showToast({
                            title: res.msg,
                            icon: "error",
                        });
                        return;
                    }
                    this.avatar=res.fileName
                });
                this.showCanvas=false;
            },
        },
    };
</script>

<style lang="scss" scoped>
    uni-page-body,
    uni-view {
        height: 100%;
    }

    .iframe {
        height: 85vh;
        overflow-y: scroll;
    }

    .custom-btn {
        position: absolute;
        bottom: 10px;
        margin: 15px auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .loading-box {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;

        .text {
            margin-top: 10px;
        }
    }
</style>
